Markdown编辑器功能不够多？自己加插件就行了！来看看这款开源Markdown编辑器

这两天临近国庆，小编要写的东西还蛮多，在编写的闲暇想到一个有趣的问题，就是大家平时都使用什么编写工具？

这几年似乎Markdown编辑器逐渐成为行业里的主流，如果有还不了解的小伙伴，小编稍稍介绍一下。

Markdown编辑器，主要是可以使用一套格式标记语言来对文档内容进行排版和格式显示，而这种编辑器在程序猿圈子里逐渐受到欢迎的原因是：

• 1、读写改方便，Markdown的格式标记语法简单，常用的标记只有十多个，相对来说非常轻量，上手很快，只需要学习几个简单的符号，然后就可以专注于码字了，而不需要手动设置各种样式。

• 2、一器多用，Markdown即可以用来编写说明文档并且在主流平台都通用，又可以写技术文章，写出来的内容中可以清晰的区分说明部分和代码。

• 3、输出方便，Markdown的文章可以轻松的转换为html、pdf等多种不同方式。

目前国内有各种各样不同的Markdown编辑器，其中比较有名的就像Typora。

小编目前用的最多也是Typora。Typora的设计理念就是追求最极致的简洁，让你在编写的同时就可以看到预览的结果，但美中不足的是Typora是一款独立的软件，并没有开源，很多小伙伴都想了解下，一款Markdown编辑器到底是怎么实现的？也有很多小伙伴想如何能让编辑器里面加一下自己想要的定制化功能呢？

所以小编今天带来的就是一款风格同样追求简洁、集合了Markdown编辑器、组件化定制、插件引用于一身的开源项目。

Milkdown

就像名字中的milk一样，整个编辑器就像牛奶一样柔顺可口，看着舒服。

和其他主流的Markdown编辑器不一样的是，Milkdown将自己的功能组件化、模块化，所以对于用户来说，可以选择自己需要的功能模块，以插件的形式引用，这样一方面可以减少不必要的资源的浪费，用户不需要为了一个功能安装其余一些不需要的功能，同时也方便满足个性化的定制需求，自己有什么诉求只需要编写一个独立的NPM功能模块包，然后通过NPM安装就可以了。

Milkdown的功能特性主要有：

主要运用的技术及对应官网包括：

• Prosemirror，用来在web端构建编辑器本身，可以参考https://prosemirror.net/
• Remark，用于作为markdown的解析器，可以参考https://github.com/remarkjs/remark
• TypeScript，编写语法，https://www.typescriptlang.org/
• Emotion，用于构建样式，https://emotion.sh/
• Prism，代码块的支持，https://prismjs.com/
• Katex，渲染用，https://katex.org/

目前Milkdown提供直接在线使用功能，我们可以在其中任意的使用、体验。

例如像表格，在Milkdown中，只需要通过输入 || 和一个空格，就可以完成。

打两个 ||

再打一个空格

点击表格左上角，可以对表格进行行列操作

同时可以支持左右屏分别显示源码和效果，方便比对，查看源码进行修改。

其他的功能小伙伴们可以自行尝试，应该可以满足大多数人的一般需要。

如果有什么额外想实现的功能，记得Milkdown是插件式的工具，除了自己直接编写插件，我们也可以先去官方插件库查找一下，看看是否已经有前人完成了我们的构思。

目前官方给出的插件有：

名称	描述
@milkdown/preset-commonmark	添加commonmark语法支持
@milkdown/preset-gfm	添加gfm语法支持
@milkdown/plugin-history	添加撤销和重做支持
@milkdown/plugin-clipboard	添加 markdown 格式的复制粘贴能力
@milkdown/plugin-cursor	添加 drop 和 gap 光标
@milkdown/plugin-listener	添加监听器支持
@milkdown/plugin-collaborative	添加协同编辑支持
@milkdown/plugin-table	添加表格语法支持（已经包含在 gfm 中）
@milkdown/plugin-prism	添加 prism用于支持代码块高亮
@milkdown/plugin-math	添加 LaTeX用于支持数学公式
@milkdown/plugin-tooltip	添加选择工具条
@milkdown/plugin-slash	添加斜线指令
@milkdown/plugin-emoji	添加表情符号支持

同时官方还提供社区，让用户们可以自由地交流分享自己的插件，不过下载别人的插件需谨慎哦。

当然大家最关心的可能还是如何自己编写插件，其实不难，大多数插件的格式都是这样的：

import { MilkdownPlugin } from '@milkdown/core';

const myPlugin: MilkdownPlugin = (pre) => {
    // #1 准备阶段
    return async (ctx) => {
        // #2 执行阶段
    };
};

主要由两部分组成，准备阶段和执行阶段。

准备阶段的内容就是将插件被通过use时，注册进milkdown，然后执行阶段就是在插件被真实加载时执行的内容。

说那么多不如自己上手练一练，想自己开发插件自给自足的小伙伴，或者喜欢这个风格想直接试用的小伙伴，赶紧一起来试试这个开源的Markdown编辑器吧：

点击下方卡片，关注公众号“TJ君”

回复“milk”，获取仓库地址

往期推荐

大家好，我是TJ

一个励志推荐10000款开源项目与工具的程序员

欢迎关注我，了解多好玩、有趣的科技资讯